<template>
    <mu-container class="container">

        <Steps :active-step="activeStep"></Steps>

        <div class="post-content">
            <Titles :text="'保函原件邮寄信息'">
            </Titles>

            <post-card ref="postCard"></post-card>

        </div>

        <div class="coupons-content">
            <Titles :text="'选择优惠券'">

                <my-button slot="content" @click="coinCouponClick">
                    兑换优惠券
                </my-button>

            </Titles>

            <!-- 优惠卷 -->
            <Coupons 
            style="margin:14px 0 8px 0"
                :list="couponList"
                @setCoupon="getSelectCoupon"
            > 
            </Coupons>

        </div>

        <div class="payway-content">
            <Titles :text="'选择支付方式'">
            </Titles>

            <div class="warn">
                <span class="deepColor">特别注意：</span>
                <span>请确认您所选择的付款方式 <span  class="deepColor">与招标文件中要求一致</span>，若无要求，请忽略。</span>
            </div>

            <van-radio-group 
                v-model="form.radio"
                direction="horizontal" 
                class="payway-radio"
            >
                <van-radio name="1" style="flex:1">微信支付</van-radio>
                <van-radio name="2" style="flex:1">线下支付</van-radio>
            </van-radio-group>

        </div>


        <div class="money-content">
            <Titles :text="'办理费用'">
                <span slot="content">
                    <span class="number" ref="prices"> 
                        {{ form.amount }} 
                    </span>
                    <span>元</span>          
                </span>
            </Titles>
        </div>

        <div class="explain-content">
            支付说明：一经出函除项目终止或项目取消情况外不予退款。
        </div>

        <van-button 
            type="info"
            round  
            block
        >
            去支付
        </van-button>

        <!-- <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">我的保函</van-tabbar-item>
            <van-tabbar-item icon="search">保函申请</van-tabbar-item>
            <van-tabbar-item icon="search">保函询价</van-tabbar-item>
        </van-tabbar> -->


        <!-- 兑换优惠卷 -->
        <coin-coupon
            v-if="coinCouponDialog"
            ref="coinCouponRef"
            @close="coinCouponclose"
        >
        </coin-coupon>

    </mu-container>
</template>
<script>
    import Steps from '@/views/payNew/components/steps.vue'
    import Titles from '@/views/payNew/components/titles.vue'
    import Coupons from '@/views/payNew/components/Coupons.vue'
    import coinCoupon from '@/views/payNew/components/coinCoupon.vue'
    import postCard from '@/views/payNew/components/postCard.vue'
    export default {
        components:{
            Steps,
            Titles,
            Coupons,
            coinCoupon,
            postCard,
        },
        props: {
            
        },
        data() {
            return {
                activeStep:1,
                active:0,

                form:{
                    radio:1
                },
                bidder:'',

                vendorinfo:{},
                couponList:[],
                couponId:'',
                coinCouponDialog:false,
                mailAddressList:[],

            }
        },
        watch:{

        },
        methods:{

            queryData(){
                const loading = this.$loading({
                    text: '订单加载中,请稍等...'
                });
                var that = this;
                this.$api.orderdetail({
					// rowguid: that.$route.query.id
                    rowguid:'BHT20230129126552'
				}).then(function (data) {
                    that.form = data.orderinfo;
                    // that.bidder = data.orderinfo.bidder;
                    // that.vendorinfo = data.vendorinfo;
                    // that.vendorinfo = data.vendorinfo
				}).then(()=>{
                    this.getMyCoupon();
                    this.$refs.postCard.getMailAddressList();
                    loading.close();
                })
            },

            getMyCoupon() {
                this.$api.mycoupon({
                    orderamount: this.form.amount,
                    bidsection : this.form.bidsection,
                    vendorid: this.form.vendorid,
                    procitycode: this.form.procitycode,
                }).then((res) =>{
                    this.couponList = res;
                })
            },


            getSelectCoupon(val){
                console.log(val);
                if(val.type === 'cancel'){
                    this.$refs.prices.innerText = this.form.amount;
                    this.couponId = '';
                }else if(val.type === 'checked'){
                    if (val.coupontype === '1') {
                        // 优惠价卷
                        this.$refs.prices.innerText = (this.form.amount - val.value);
                        this.couponId = val.rowguid
                    } else if (val.coupontype === '2') {
                        // 折扣卷
                        this.$refs.prices.innerText = (this.form.amount * val.value / 10);
                        this.couponId = val.rowguid
                    }
                }
            },

            coinCouponClick(){
                this.coinCouponDialog = true;
            },

            coinCouponclose(val){
                this.coinCouponDialog = false;
                if(val === 'refresh'){
                    this.getMyCoupon();
                }
            },

        },
        mounted(){
            this.queryData()

        }
    }
</script>
<style lang="less" scoped>
    @import  '../../css/default.less';

    .container {
        padding: 16px;

        .coupons-content{

        }

        .payway-content{
            .warn{
                padding: 14px 0 ;
                .deepColor{
                    color: @def-color;
                }
            }
            .payway-radio{
                padding-bottom: 14px ;
            }


        }

        .money-content{
            .number{
                font-size: 21px;
                color: @def-color;
            }
        }

        .explain-content{
            color: @warn-color;
            padding: 14px 0 ;
        }
    }



</style>